@color-highlight-header-background: @color-mediumlight;
@color-highlight-text: @color-text-highlight;

// The dropdown adapts to screen size, to provide three different displays.
// - A simple list of matching results
// - Same list, but with text snippetting added if size is large enough
// - Adding a second colum to let the content breath if enough room available

.sidebar .algolia-autocomplete {
  width: 100%;
  vertical-align: top;
}

.nav-search .algolia-autocomplete {
  display: block !important;
  height: 100%;
}

// Main autocomplete wrapper
.wrapper-desktop-search-results .aa-dropdown-menu {
  //reset algolia js styling
  top: 0.75rem !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  background: @color-lighter;
}

.wrapper-mobile-search-results .aa-dropdown-menu {
  //reset algolia js styling
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;

  top: @panel-width-tablet !important;
  @media screen and (min-width: @breakpoint) {
    top: @panel-width-tablet !important;
  }

  background: fade(@color-lightest, 97);
  box-shadow: rgba(0, 0, 0, 0.03) 0 0 1px 5px;
  text-align: left;

  > * {
    .std-ypadding;
    .page-margins;
    .std-xpadding;
  }
}

// Each suggestion
.algolia-docsearch-suggestion {
}

.algolia-docsearch-suggestion--content {
  &:extend(.sidebar ul.list-toc li);
  &:extend(.sidebar ul.list-toc a all);
}



// Each sub-suggestion
.algolia-docsearch-suggestion__secondary {
  //
}

// Main category headers
.algolia-docsearch-suggestion--category-header {
  &:extend(.sidebar .heading-toc);

  display: none;
  // Only show it when flaggued as "__main"
  .algolia-docsearch-suggestion__main & {
    display: block;
  }
}

.aa-suggestions .aa-suggestion:first-child {
  .algolia-docsearch-suggestion--category-header {
    padding-top: 0;
  }
}

// Highlight
.algolia-docsearch-suggestion--highlight {
  .type-semibold;
  color: @color-highlight-text;
  background: none;

  // Highlight the background in header
  .algolia-docsearch-suggestion--category-header & {
    color: inherit;
    background: @color-highlight-header-background;
  }
}

// Selected suggestion
.aa-cursor .algolia-docsearch-suggestion--content {
  &:extend(.sidebar ul.list-toc a all);
}
.aa-cursor
  .algolia-docsearch-suggestion
  .algolia-docsearch-suggestion--content {
  &:extend(.sidebar ul.list-toc a:hover);

  &:before {
    &:extend(.sidebar ul.list-toc a:before);
    opacity: 1 !important;
  }
}

// The secondary column is hidden on small screens
.algolia-docsearch-suggestion--subcategory-column {
  display: none;
  cursor: default;
}
// The text snippet is hidden on small screens
.algolia-docsearch-suggestion--text {
  display: none;
}

.algolia-docsearch-suggestion--content {
  //width: 100%;
}

.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
.algolia-docsearch-suggestion__secondary
  .algolia-docsearch-suggestion--content {
  border-top: 0;
}

.algolia-docsearch-suggestion--subcategory-inline {
  .type-semibold;
  display: inline-block;

  &:after {
    content: " › ";
  }
}
.algolia-docsearch-suggestion--title {
  display: inline;
}

// Footer

.algolia-docsearch-footer {
  .font-s1;
  text-align: center;
  color: @color-medium;
  padding: 1rem 0;

  .algolia-docsearch-footer--logo {
    display: inline-block !important;
    width: 45px;
    height: 16px;
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
  }
}

.sidebar {
  &.charcoal {
    @color-highlight-header-background: fade(@color-dark, 95%);

    .wrapper-desktop-search-results .aa-dropdown-menu {
      background: transparent;
    }

    .wrapper-mobile-search-results .aa-dropdown-menu {
      background: transparent;
    }

    .algolia-docsearch-suggestion--content {
      color: @color-mediumdark !important;
    }

    .algolia-docsearch-suggestion--category-header {
      color: @color-dark !important;
    }
  }
}